.couponItem-noLevel{
  background: linear-gradient(50deg, #FDF7EE 0%, #FFF5DE 41%, #FFF4E4 100%) !important;

  .couponItem-border {
    display: block !important;
  }

  &::after {
    position: absolute;
    width: calc(100% - 24px);
    height: calc(100% - 32px);
    border: 2px solid #FDF0DC;
    opacity: 0.29;
    border-radius: 16px;
    top: 16px;
    left: 12px;
  }

  .indate {
    color: #918363 !important;
  }

  .memberLogo {
    width: 30px;
    height: 33px;
    margin-right: 14px;
  }

  .cp-button {
    // background: linear-gradient(180deg, #FDD4A1 0%, #EDA447 100%) !important;
    background: #ccc !important;
  }

  .coupon-doorsill {
    color: #4B290D !important;
  }

  .coupon-value {
    color: #4B290D !important;

    .coupon-label {
      color: #4B290D !important;
    }
  }

}
.couponItem-member {
  background: linear-gradient(50deg, #FDF7EE 0%, #FFF5DE 41%, #FFF4E4 100%) !important;

  .couponItem-border {
    display: block !important;
  }

  &::after {
    position: absolute;
    width: calc(100% - 24px);
    height: calc(100% - 32px);
    border: 2px solid #FDF0DC;
    opacity: 0.29;
    border-radius: 16px;
    top: 16px;
    left: 12px;
  }

  .indate {
    color: #918363 !important;
  }

  .memberLogo {
    width: 30px;
    height: 33px;
    margin-right: 14px;
  }

  .cp-button {
    background: linear-gradient(180deg, #FDD4A1 0%, #EDA447 100%) !important;
  }

  .coupon-doorsill {
    color: #4B290D !important;
  }

  .coupon-value {
    color: #4B290D !important;

    .coupon-label {
      color: #4B290D !important;
    }
  }


}

.couponItem {
  background-color: #fff;

  padding: 0 16px;
  height: 184px;
  margin-bottom: 24px;
  border-radius: 12px;
  flex-direction: row;
  align-items: center;
  // border-left: 4px solid #ff6600;
  position: relative;

  .couponItem-border {
    position: absolute;
    width: calc(100% - 24px);
    height: calc(100% - 32px);
    border: 2px solid #FDF0DC;
    opacity: 0.29;
    border-radius: 16px;
    top: 16px;
    left: 12px;
    display: none;
    pointer-events: none;
  }

  .coupon-name {
    font-size: 28px;
    font-weight: 500;
    color: #333333;
    margin-bottom: 26px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .coupon-left {
    flex-basis: 176px;
    padding-right: 16px;
    align-items: center;
    position: relative;
    display: flex;
    justify-content: center;
    height: 100%;
    border-right: 2px dashed #E4E4E4;
    margin-right: 32px;

    &::after,
    &::before {
      position: absolute;
      content: "";
      width: 20px;
      height: 20px;
      background: #F5F7F9;
      // background-color: red;
    }

    &::after {
      top: 0;
      right: 0;
      border-radius: 0 0 50% 50%;
      transform: translate(50%, -50%);
    }

    &::before {
      bottom: 0;
      right: 0;
      border-radius: 50% 50% 0 0;
      transform: translate(50%, 50%);
    }

    .coupon-value {
      font-size: 48px;
      color: #333333;
      font-weight: 500;

      .coupon-label {
        font-size: 20px;
        color: #333333;
      }
    }

    .expiring {
      position: absolute;
      width: 72px;
      height: 72px;
      left: -16px;
      top: -48px;
    }
  }

  .coupon-info {
    flex: 1;
    padding: 36px 0;

    .info-name {
      flex-direction: row;
      margin-bottom: 28px;
      position: relative;

      align-items: center;

      .currencyBg {
        width: 76px;
        height: 28px;
        position: absolute;
        z-index: 1;
      }

      .coupon-type {
        z-index: 2;
        color: #fff;
        font-size: 24px;
        transform: scale(0.83);
      }

      .cp-name {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        margin-left: 10px;
        white-space: nowrap;
        width: 1px;
      }
    }

    .coupon-rang {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      line-height: 1.2;
      width: 363px;
    }
  }

  .coupon-right {
    width: 112px;
    margin-left: 16px;
    align-items: center;

    &.loot-all {
      .cp-button {
        // background: linear-gradient(90deg, rgba(216, 216, 216, 1) 0%, rgba(179, 179, 179, 1) 100%);
        background: linear-gradient(90deg, #45C0FF 0%, #228DFF 82%, #218CFF 100%);
      }
    }

    .has-get {
      font-size: 28px;
      margin-bottom: 16px;
      color: #999;
    }

    .cp-time {
      font-size: 28px;
      color: #ff6600;
      margin: 8px 0 16px;
    }

    .cp-button {
      width: 112px;
      height: 40px;
      // background: linear-gradient(90deg, rgba(255, 136, 0, 1) 0%, rgba(255, 77, 0, 1) 100%);
      background: linear-gradient(90deg, #45C0FF 0%, #228DFF 82%, #218CFF 100%);
      border-radius: 20px;
      color: #fff;
      font-size: 20px;
      text-align: center;
      line-height: 40px;

      &.look-use {
        background: linear-gradient(90deg, rgba(255, 209, 25, 1) 0%, rgba(255, 162, 0, 1) 100%);
      }
    }
  }
}

.image-explain {
  position: absolute;
  top: 0;
  right: 0;
  height: 48px;
  width: 56px;

  .image {
    width: 100%;
    height: 100%;
  }
}

.coupon-message {}